<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/commom.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/commom.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/博客系统logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <!-- <a href="javascript:logout()">退出登录</a> -->
        <!-- <a href="myblog_list.html">我的</a> -->
        
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="" class="avtar" alt="" id="photo">
                <h4 id="nickname"></h4><br>
                <!-- <a href="/upd_password.html" id="draft">修改密码</a> -->
                <div class="counter">
                    <span>文章</span>
                    <!-- <a href="/mydraft.html" id="draft">草稿箱</a> -->
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <!-- <span id="draftCount"></span> -->
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"> </h3>
                <!-- 博客时间 -->
                <div class="date">发布时间: <span id="updatetime"> </span> &nbsp;&nbsp;&nbsp;
                                    阅读量: <span id="rcount"> </span>&nbsp;&nbsp;&nbsp;
                                    <button id="icon2" onclick="myPrize()">
                                        <svg t="1681020637114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8550" width="20" height="20"><path d="M341.196926 1023.989977H85.299231a84.019743 84.019743 0 0 1-85.299231-82.313758V466.5595A84.019743 84.019743 0 0 1 85.299231 384.245742h255.897695zM85.299231 938.690746h170.598463V469.544973H85.299231z" fill="#333333" p-id="8551"></path><path d="M783.899937 1023.989977H298.54731a42.649616 42.649616 0 0 1-42.649616-42.649615V426.895357a42.649616 42.649616 0 0 1 17.273095-34.33294c69.092377-50.966291 150.97964-168.465982 157.803578-250.139996A142.449716 142.449716 0 0 1 711.39559 107.02324a142.236468 142.236468 0 0 1 5.331202 37.531661v25.163274A452.938919 452.938919 0 0 1 685.805821 341.596126h203.651915a125.816366 125.816366 0 0 1 106.624039 53.31202 174.863424 174.863424 0 0 1 19.405575 151.192887l-105.984295 382.567053v2.985473A140.103988 140.103988 0 0 1 783.899937 1023.989977zM341.196926 938.690746h442.703011a56.723989 56.723989 0 0 0 43.929104-34.332941l104.918054-382.140556v-2.985474a92.336418 92.336418 0 0 0-8.316675-75.276571 40.517135 40.517135 0 0 0-36.038925-17.059847H615.220707a42.649616 42.649616 0 0 1-35.399181-66.5334 333.306747 333.306747 0 0 0 51.606035-190.643782V144.341653A57.150485 57.150485 0 0 0 629.081832 128.348048a57.363733 57.363733 0 0 0-112.808234 15.353861 16.206854 16.206854 0 0 1 0 3.198721C508.596667 248.833212 422.657692 378.701292 341.196926 448.220165z" fill="#333333" p-id="8552"></path></svg>
                                    </button>
                                    <span id="prize">1</span>
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv">

                </div>


                <br/>
                <br/>
                <!-- 发布评论 -->
                <div id="discussDiv">
                    <!-- 博客评论 -->
                    <!-- <div>
                        <br/>
                        <div id="userimg">
                            <img src="img/cat.jpg" id="image">
                                <font face="幼圆" id="nickname">你好</font>
                        </div>
                        <span id="discuss">1111</span>
                    </div> -->
                </div>

            <br>
            <span id="tip">有什么新鲜事要告诉大家?</span><br>
            <textarea type="text" id="userdis" placeholder="说点什么吧...(66字以内)"></textarea>
            <br/>
            <button id="submit" onclick="submit()">发布</button>
                
                
            </div>
        </div>

    </div>
    <script type="text/javascript">

        // 提交文章评论
        function submit() {
            var id = getUrlValue("id");
            if (id == "") {
                alert("非法访问");
                return;
            }
            // 拿到评论
            var userdis = jQuery("#userdis");
            if (userdis.val() === "") {
                alert("我不能 get 到你的想法~");
                return;
            }
            jQuery.ajax({
                url: "/dis/setdis",
                type: "POST",
                data: {"id": id, "discuss": userdis.val()},
                success: function(result) {
                    if (result != null && result.code === 200 && result.data === 1) {
                        // alert("恭喜发送成功");
                        // location.href = location.href;
                        $("#userdis").val("");
                        getDetail();
                        // document.getElementById("userdis").innerHTML = "";
                    } else if(result != null && result.code === -2 && result.data == null) {
                            alert("您的评论过长~超出了限制~");
                    } else if(result != null && result.code === -3 && result.data == null) {
                            alert("您当前未登录, 不能发表意见哦~");
                    } else {
                        alert("评论失败~请重试");
                    }
                }
            });

        }

        // 获取评论
        function getDetail() {
            var id = getUrlValue("id");
            if (id === "") {
                alert("非法参数!访问失败!")
                return;
            }
            jQuery.ajax({
                url: "/dis/getdis",
                type: "POST",
                data: {"id": id},
                success: function(result) {
                    if (result != null && result.code === 200 && result.data.length >= 1) {
                        var artListHtml = ""; // 拼接的变量.
                        for (var i = 0; i < result.data.length; i++) {
                            // 循环拿到每一个评论对象.
                            var artidis = result.data[i];
                            // 开始拼接
                            artListHtml += '<div>';
                            artListHtml += '<br/>';
                            artListHtml += '<div id="userimg">';
                            // artListHtml += '<img src= "http://localhost:8082' + artidis.userphoto +  '" id="image">';
                            artListHtml += '<img src= "http://43.143.87.64:8082' + artidis.userphoto +  '" id="image">';
                            artListHtml += '<font face="幼圆" id="nickname">'+ artidis.nickname +'</font>';
                            artListHtml += '</div>';
                            artListHtml += '<span id="discuss">' + artidis.discuss + '</span>';
                            artListHtml += '</div>';
                            // $("#image").attr("src","" ); 
                        } 
                        jQuery("#discussDiv").html(artListHtml);
                    } else if(result != null && result.code === 200) {

                    } else {
                        alert("数据获取错误, 请刷新重试!")
                    }
                }
            })
        }
        getDetail();


            var editormd;
            function initEdit(md){

                editormd = editormd.markdownToHTML("editorDiv", {
                markdown : md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            }


            // 获取文章详情信息
            function getArtDetail(id) {
                if (id === "") {
                    alert("非法参数!访问失败!")
                    return;
                }
                jQuery.ajax({
                    url: "/art/detail",
                    type: "POST",
                    data: {"id": id},
                    success: function(result) {
                        if (result != null && result.code === 200) {
                            // 查询成功.
                            jQuery("#title").html(result.data.art.title);
                            jQuery("#updatetime").html(result.data.art.updatetime);
                            jQuery("#rcount").html(result.data.art.rcount);
                            jQuery("#prize").html(result.data.art.prize);
                            // jQuery("#prize").html(result.data.prize);
                            // jQuery("#editorDiv").html(result.data.content);
                            initEdit(result.data.art.content);
                            if (result.data.state === 1) {
                                // 没有点赞
                                jQuery("#icon2").html('<svg t="1681020592138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8406" width="20" height="20"><path d="M85.333333 384h106.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v469.333334a21.333333 21.333333 0 0 1-21.333333 21.333333H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666666-42.666667z m225.834667-55.168l273.066667-273.066667a21.333333 21.333333 0 0 1 27.904-2.005333l36.394666 27.306667a64 64 0 0 1 23.594667 66.986666L622.933333 341.333333H896a85.333333 85.333333 0 0 1 85.333333 85.333334v89.770666a85.333333 85.333333 0 0 1-6.4 32.512l-132.053333 320.64a42.666667 42.666667 0 0 1-39.466667 26.410667H341.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V358.997333a42.666667 42.666667 0 0 1 12.501333-30.165333z" fill="#4E95F8" p-id="8407"></path></svg>');
                            } else {
                                // 已经点赞
                                jQuery("#icon2").html('<svg t="1681020637114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8550" width="20" height="20"><path d="M341.196926 1023.989977H85.299231a84.019743 84.019743 0 0 1-85.299231-82.313758V466.5595A84.019743 84.019743 0 0 1 85.299231 384.245742h255.897695zM85.299231 938.690746h170.598463V469.544973H85.299231z" fill="#333333" p-id="8551"></path><path d="M783.899937 1023.989977H298.54731a42.649616 42.649616 0 0 1-42.649616-42.649615V426.895357a42.649616 42.649616 0 0 1 17.273095-34.33294c69.092377-50.966291 150.97964-168.465982 157.803578-250.139996A142.449716 142.449716 0 0 1 711.39559 107.02324a142.236468 142.236468 0 0 1 5.331202 37.531661v25.163274A452.938919 452.938919 0 0 1 685.805821 341.596126h203.651915a125.816366 125.816366 0 0 1 106.624039 53.31202 174.863424 174.863424 0 0 1 19.405575 151.192887l-105.984295 382.567053v2.985473A140.103988 140.103988 0 0 1 783.899937 1023.989977zM341.196926 938.690746h442.703011a56.723989 56.723989 0 0 0 43.929104-34.332941l104.918054-382.140556v-2.985474a92.336418 92.336418 0 0 0-8.316675-75.276571 40.517135 40.517135 0 0 0-36.038925-17.059847H615.220707a42.649616 42.649616 0 0 1-35.399181-66.5334 333.306747 333.306747 0 0 0 51.606035-190.643782V144.341653A57.150485 57.150485 0 0 0 629.081832 128.348048a57.363733 57.363733 0 0 0-112.808234 15.353861 16.206854 16.206854 0 0 1 0 3.198721C508.596667 248.833212 422.657692 378.701292 341.196926 448.220165z" fill="#333333" p-id="8552"></path></svg>');
                            }
                            // 得到用户 id, 查询用户的信息
                            showUser(result.data.art.uid);
                        } else {
                            alert("查询失败!请重试!")
                        }
                    }

                });
            }
            getArtDetail(getUrlValue("id"));

            // todo: 查询用户的信息
            function showUser(id) {
                  jQuery.ajax({
                    url: "/user/showuser",
                    type: "POST",
                    data: {"id": id},
                    success: function(result) {
                        if (result != null && result.code === 200 && result.data.id > 0) {
                            jQuery("#nickname").text(result.data.nickname);
                            jQuery("#artCount").text(result.data.artCount);
                            jQuery("#draftCount").text(result.data.draftCount);
                            // $("#photo").attr("src","http://localhost:8082" + result.data.photo);
                            $("#photo").attr("src","http://43.143.87.64:8082" + result.data.photo);

                        } else {
                            alert("页面加载失败, 请再次刷新!");
                        }
                    }
                  });
            }


            // 实现文章阅读量 ++ 
            function updateRCount() {
                // 先得到 文章 id.
                var id = getUrlValue("id");
                if (id !== "") {
                    jQuery.ajax({
                        url: "/art/updrcount",
                        type: "POST",
                        data: {"id": id},
                        // 此处 该函数可以不写了.
                        success: function(result) { }
                    });
                }
                
            }
            // 在前端加载了文章详情页就会加载该函数发送请求.
            updateRCount();

            // 增加点赞数
            function myPrize() {
                var id = getUrlValue("id");
                jQuery.ajax({
                    url: "/art/prize",
                    type: "POST",
                    data: {"id": id },
                    success: function(result) {
                        var prizeHtml = "";
                        if (result != null && result.code === 200) {
                            // 点赞成功/取消点赞, 变换图片
                            if (result.data.state === 1) {
                                prizeHtml += '<svg t="1681020592138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8406" width="20" height="20"><path d="M85.333333 384h106.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v469.333334a21.333333 21.333333 0 0 1-21.333333 21.333333H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666666-42.666667z m225.834667-55.168l273.066667-273.066667a21.333333 21.333333 0 0 1 27.904-2.005333l36.394666 27.306667a64 64 0 0 1 23.594667 66.986666L622.933333 341.333333H896a85.333333 85.333333 0 0 1 85.333333 85.333334v89.770666a85.333333 85.333333 0 0 1-6.4 32.512l-132.053333 320.64a42.666667 42.666667 0 0 1-39.466667 26.410667H341.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V358.997333a42.666667 42.666667 0 0 1 12.501333-30.165333z" fill="#4E95F8" p-id="8407"></path></svg>'   
                            } else {
                                prizeHtml += '<svg t="1681020637114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8550" width="20" height="20"><path d="M341.196926 1023.989977H85.299231a84.019743 84.019743 0 0 1-85.299231-82.313758V466.5595A84.019743 84.019743 0 0 1 85.299231 384.245742h255.897695zM85.299231 938.690746h170.598463V469.544973H85.299231z" fill="#333333" p-id="8551"></path><path d="M783.899937 1023.989977H298.54731a42.649616 42.649616 0 0 1-42.649616-42.649615V426.895357a42.649616 42.649616 0 0 1 17.273095-34.33294c69.092377-50.966291 150.97964-168.465982 157.803578-250.139996A142.449716 142.449716 0 0 1 711.39559 107.02324a142.236468 142.236468 0 0 1 5.331202 37.531661v25.163274A452.938919 452.938919 0 0 1 685.805821 341.596126h203.651915a125.816366 125.816366 0 0 1 106.624039 53.31202 174.863424 174.863424 0 0 1 19.405575 151.192887l-105.984295 382.567053v2.985473A140.103988 140.103988 0 0 1 783.899937 1023.989977zM341.196926 938.690746h442.703011a56.723989 56.723989 0 0 0 43.929104-34.332941l104.918054-382.140556v-2.985474a92.336418 92.336418 0 0 0-8.316675-75.276571 40.517135 40.517135 0 0 0-36.038925-17.059847H615.220707a42.649616 42.649616 0 0 1-35.399181-66.5334 333.306747 333.306747 0 0 0 51.606035-190.643782V144.341653A57.150485 57.150485 0 0 0 629.081832 128.348048a57.363733 57.363733 0 0 0-112.808234 15.353861 16.206854 16.206854 0 0 1 0 3.198721C508.596667 248.833212 422.657692 378.701292 341.196926 448.220165z" fill="#333333" p-id="8552"></path></svg>'
                            }
                            jQuery("#prize").html(result.data.prize);
                            jQuery("#icon2").html(prizeHtml);
                        } else if(result != null && result.code === -2 && result.data == null) {
                            alert("登录后才可以进行点赞收藏哦~");
                        } else {
                            alert("点赞收藏失败~")
                        }
                    }
                });
            }
            // myPrize();
    </script> 
</body>

</html>